<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/style.css">
    <title>Document</title>
</head>
<body>
    <!-- 头部 -->
    <header>
        <!-- 状态栏 -->
        <div class="hd-top">
            <div class="inner container">
                <ul>
                    <li><a href="">华为商城</a></li>
                    <li><a href="">花粉俱乐部</a></li>
                    <li><a href="">EMUI</a></li>
                </ul>
                <!-- 登陆注册 -->
                <div class="login-register">
                    <a href="" class="login">登录</a>
                    <a> | </a>
                    <a href="">注册</a>
                </div>
            </div>
        </div>
        
        <!-- 导航部分 -->
        <div class="hd-bottom container">
            <!-- logo -->
            <h1 class="hd-logo">
                <a href="">华为荣耀</a>
            </h1>

            <ul class="hd-nav">
                <li>						
                    <a href="">产品</a>
                    <div class="second-list"></div>
                </li>
                <li><a href="">伙伴通</a></li>
                <li><a href="">关于荣耀</a></li>
                <li><a href="">新闻测评</a></li>
                <li><a href="">视频</a></li>
                <li><a href="">活动</a></li>
                <li><a href="">服务支持</a></li>
            </ul>

            <!-- 搜索框 -->
            <div class="hd-search">
                <input type="search">
                <span>
                    <a href="">荣耀V20</a>
                    <a href="">荣耀V20</a>
                </span>
            </div>
        </div>
    </header>
    <!-- 导航栏 -->
    <div class="banner">
        <div class="container">
            <div class="arrow arrow1"></div>
            <div class="arrow arrow2"></div>
            <!--底部导航-->
            <ul class="slide-nav">
                <li class="fisrt-nav"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <!-- 荣耀20部分 -->
    <div class="honor20 container">
        <h2>找到适合你的荣耀手机</h2>
        <div class="phone-slt">
            <select name="">
                <option value="">产品类型</option>
                <option value="">产品类型</option>
                <option value="">产品类型</option>
                <option value="">产品类型</option>
                <option value="">产品类型</option>
            </select>
            <select name="">
                <option value="">屏幕尺寸</option>
                <option value="">产品类型</option>
                <option value="">产品类型</option>
                <option value="">产品类型</option>
                <option value="">产品类型</option>
            </select>
            <select name="">
                <option value="">网络制式</option>
                <option value="">产品类型</option>
                <option value="">产品类型</option>
                <option value="">产品类型</option>
                <option value="">产品类型</option>
            </select>
            <select name="">
                <option value="">发布时间</option>
                <option value="">产品类型</option>
                <option value="">产品类型</option>
                <option value="">产品类型</option>
                <option value="">产品类型</option>
            </select>
        </div>
        
        <figure class="honor20-show">
            <img src="img/e2993fe908ce8ec03b02b7ba91b19ac3.jpg" alt="" class="left-honor20"/>
            <ul class="right-des">
                <li><img src="img/9d6dd17604431bf9732caeccf3be2d78.jpg" alt=""/></li>
                <li><img src="img/452ec42c91b65392e13d58c2f649e541.jpg" alt=""/></li>
                <li class="text-set mt15">制式：全网通</li>
                <li class="text-set">颜色：冰岛白 / 幻夜黑 / 幻影蓝</li>
                <li class="text-set">容量：8GB+128GB/8GB+256GB</li>
                <li>
                    <button>立即购买 &gt;</button>
                    <button>加入对比 &gt;</button>
                </li>
            </ul>
        </figure>
    </div>

    <!--recommend 部分-->
    <div class="recommend container">
        <!--标题-->
        <h3 class="h3-tit">相关推荐  <a href="">更多 &gt;</a></h3>
        
        <!--各种手机展示-->
        <div class="items-show">
            <figure>
                <figcaption>
                    <h4>荣耀20</h4>
                    <p>定格奇幻之美</p>
                </figcaption>
                <img src="img/7bb544ff6a929e9016105c2b90015821.jpg" alt=""/>
                <div class="buy-com">
                    <button>立即购买</button>
                    <button>加入对比 &gt;</button>
                </div>
                <!--标识-->
                <i class="tip">新品</i>
            </figure>
            <figure>
                <figcaption>
                    <h4>荣耀V20</h4>
                    <p>科技标杆 见所未见</p>
                </figcaption>
                <img src="img/add4d852a5228d98fd3f621e58a0ae1b.jpg" alt=""/>
                <div class="buy-com">
                    <button>立即购买</button>
                    <button>加入对比 &gt;</button>
                </div>
                <!--标识-->
                <i class="tip">热销</i>
            </figure>
            <figure>
                <figcaption>
                    <h4>荣耀20i</h4>
                    <p>3200万AI自拍 更美更自然</p>
                </figcaption>
                <img src="img/5a2104f47e43ba510c9d866ef696309b.jpg" alt=""/>
                <div class="buy-com">
                    <button>立即购买</button>
                    <button>加入对比 &gt;</button>
                </div>
            </figure>
            <figure>
                <figcaption>
                    <h4>荣耀8X</h4>
                    <p>千元屏霸</p>
                </figcaption>
                <img src="img/7bb544ff6a929e9016105c2b90015821.jpg" alt=""/>
                <div class="buy-com">
                    <button>立即购买</button>
                    <button>加入对比 &gt;</button>
                </div>
                <!--标识-->
                <i class="tip">新品</i>
            </figure>
        </div>
    </div>

    <!--商城链接部分-->
    <div class="vmall-link container">
        <figure>
            <img src="./img/flagship-title.png" alt=""/>
            <a href="" class="a-set">点击前往 &gt;</a>
        </figure>
        
        <div class="other-mall">
            <hgroup>
                <h3>点击前往更多购买平台</h3>
                <h4>*具体价格以实际销售平台为准</h4>
            </hgroup>
            <div class="mall-items">
                <img src="img/index-buy-jd.png" alt=""/>
                <img src="img/index-buy-tmall.png" alt="" class="ml37"/>
                <img src="img/index-buy-taobao.png" alt="" class="mt54"/>
                <img src="img/index-buy-suning.png" alt="" class="ml37 mt54"/>
            </div>
        </div>
    </div>
		
		<!-- 最新消息 部分 -->
		<div class="msg container">
			<!--标题-->
			<h3 class="h3-tit">最新消息 <a href="">更多 &gt;</a></h3>
			
			<!--消息展示-->
			<div class="msg-items">
				<figure>
					<img src="img/a8e97bcdc4e36fe1fc15547bf3083408.jpg" alt=""/>
					<figcaption>
						<p>3200万AI自拍神器荣耀20i正式发布</p>
						<time>2019-04-17</time>
					</figcaption>
				</figure>
				<figure>
					<img src="img/a8e97bcdc4e36fe1fc15547bf3083408.jpg" alt=""/>
					<figcaption>
						<p>3200万AI自拍神器荣耀20i正式发布</p>
						<time>2019-04-17</time>
					</figcaption>
				</figure>
				<figure>
					<img src="img/a8e97bcdc4e36fe1fc15547bf3083408.jpg" alt=""/>
					<figcaption>
						<p>3200万AI自拍神器荣耀20i正式发布</p>
						<time>2019-04-17</time>
					</figcaption>
				</figure>
			</div>
		</div>
		
		<!--服务中心部分-->
		<div class="server container">
			<div class="index-block1">
				<hgroup>
					<h2>在线客服</h2>
					<h4>与专业人员联系</h4>
					<a href=""  class="a-set">开始沟通</a>
				</hgroup>
			</div>
			<div class="index-block2">
				<hgroup>
					<h2>服务中心</h2>
					<h4>你附近的服务中心</h4>
					<a href=""  class="a-set">门店地址</a>
				</hgroup>
			</div>
		</div>
		
		<!--footer 部分-->
		<footer>
            <div class="channel-floor container">
                <ul>
                    <li>
                        <a href="">
                            <span></span>
                            官方商城 品质保证
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span></span>
                            7天退货 15天换货
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span></span>
                            48天起免运费
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span></span>
                            1800+服务店 全国联保
                        </a>
                    </li>
                </ul>
            </div>
            <div class="slogon-container container">
                <!-- 倒数第二个左侧 -->
                <div class="slogon-container-l">
                    <dl>
                        <dt>
                            <p class="title">
                                推荐产品
                            </p>
                        </dt>
                        <dd>
                            <ol>
                                <li><a href="">手机</a></li>
                                <li><a href="">笔记本</a></li>
                                <li><a href="">平板</a></li>
                                <li><a href="">智慧屏</a></li>
                                <li><a href="">智能穿戴</a></li>
                                <li><a href="">智能家居</a></li>
                                <li><a href="">配件</a></li>
                            </ol>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <p class="title">
                                品牌
                            </p>
                        </dt>
                        <dd>
                            <ol>
                                <li><a href="">关于荣耀</a></li>
                                <li><a href="">新闻</a></li>
                                <li><a href="">活动</a></li>
                                <li><a href="">视频</a></li>
                                <li><a href="">加入我们</a></li>
                            </ol>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <p class="title">
                                购物相关
                            </p>
                        </dt>
                        <dd>
                            <ol>
                                <li><a href="">购货指南</a></li>
                                <li><a href="">退换货政策</a></li>
                                <li><a href="">配送方式</a></li>
                                <li><a href="">支付方式</a></li>
                                <li><a href="">常见问题</a></li>
                            </ol>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <p class="title">
                                服务支持
                            </p>
                        </dt>
                        <dd>
                            <ol>
                                <li><a href="">保修政策</a></li>
                                <li><a href="">备件价格查询</a></li>
                                <li><a href="">会员服务规则</a></li>
                                <li><a href="">价格保护规则</a></li>
                            </ol>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <p class="title">
                                快速链接
                            </p>
                        </dt>
                        <dd>
                            <ol>
                                <li><a href="">荣耀俱乐部</a></li>
                                <li><a href="">加入荣耀</a></li>
                            </ol>
                        </dd>
                    </dl>
                </div>
                <!-- 倒数第二个右侧 -->
                <div class="slogon-container-r">
                    <dl>
                        <dd>
                            <a href="">在线客服</a>
                        </dd>
                        <dd>
                            <p>400-078-8888</p>
                        </dd>
                        <dd class="word">商城服务热线</dd>
                    </dl>
                    <div class="service-code">
                        <h2>关注荣耀：</h2>
                        <p><img src="./img/code.jpg" alt="" style="width: 60px; height: 60px;"></p>
                    </div>
                </div>
            </div>

            <div class="footer-container container">
                <div class="footer-container-inner">
                    <ul class="footer-warrant-link">
                        <li><a href="">隐私声明</a></li>
                        <li><a href="">使用条款</a></li>
                        <li><a href="">关于cookies</a></li>
                    </ul>
                    <p>版权所有 &nbsp;© &nbsp;荣耀终端有限公司 &nbsp;2021 保留一切权利&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p>
                    <p>
                        <a href="">粤ICP备20047157号</a>
                        |
                        <a href="">粤公网安备 </a>
                        <a href="">44030702003447号</a>
                    </p>
                    <ul class="footer-warrant-link-b">
                        <li>
                            增值电信业务许可证：粤B2-20201081 
                            <a href="">
                                <img src="./img/54718326091612381745.png" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </footer>
</body>
</html>